import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { actionCreators } from './store';

import { Table, Switch, Pagination } from '@alifd/next';
import IceContainer from '@icedesign/container';
import '@alifd/next/dist/next.css';

const STATUS = {
  '1': '#3daf14',
  '-1': '#ef6f6e',
  '0': '#5584ff'
};

const enabledStatusOnChange = (checked) => {
  console.log( `switch to ${checked}`)
}

class WorkTablePlus extends PureComponent {
  renderWorkCheckedStatus = (checkedStatus) => {
    return (
      <div style={styles.status}>
        <span style={{ ...styles.dot, background: STATUS[checkedStatus] }} />
        {checkedStatus === 1 ? '已通过' : checkedStatus === 0 ? '审核中' : '未通过'}
      </div>
    );
  }

  render() {
    const { workData, isLoading, current } = this.props;
    return (
      <IceContainer title="作品列表">
        <Table loading={isLoading} dataSource={workData}>
          <Table.Column 
            title="序号" 
            width={20} 
            cell={(item, index) => ++index + 10*(current-1)} 
          />
          <Table.Column title="作品名称"  dataIndex="workName" width={200} />
          <Table.Column title="作品描述" dataIndex="workDesc" width={200} />
          <Table.Column title="作者姓名" dataIndex="authorName" width={80} />
          <Table.Column title="作品格式" dataIndex="workFormat" width={50} />
          <Table.Column title="所属分类" dataIndex="workType" width={50} />
          <Table.Column title="作品标签" dataIndex="tags" width={100} />
          <Table.Column title="作品价格" dataIndex="price" width={50} />
          <Table.Column 
            title="审核状态"  
            dataIndex="checked" 
            width={60}
            cell={this.renderWorkCheckedStatus}
          />
          <Table.Column 
            title="是否生效" 
            width={30}
            cell={(item, index, record) => {
              return (
                <Switch
                  defaultChecked={record.enabled}
                  onChange={(checked) => this.props.changeEnabled(checked, record.workId)}
                  size="small"
                />
              )
            }}
          />
        </Table>
        <Pagination 
          style={styles.pagination}
          current={current}
          onChange={this.handlePaginationChange}
        />
      </IceContainer>
    );
  }

  // 从后台获取数据 Get http://localhost:9080/work/all?start=0&length=10
  componentDidMount() {
    this.props.getWorksData();
  }
}

const styles = {
  status: {
    position: 'relative',
    paddingLeft: '20px',
  },
  dot: {
    width: '10px',
    height: '10px',
    position: 'absolute',
    left: '0',
    top: '2px',
    borderRadius: '50%',
  },
  pagination: {
    marginTop: '20px',
    textAlign: 'right',
  }
};

const mapState = (state) => ({
  workData: state.Works.get('workData').toJS(), 
  isLoading: state.Works.get('isLoading'), 
  current: state.Works.get('current')
});

const mapDispatch = (dispatch) => ({
  getWorksData() {
    dispatch(actionCreators.getWorksData());
  },
  changeEnabled(checked, id) {
    dispatch(actionCreators.changeEnabled(checked, id));
  }
});

export default connect(mapState, mapDispatch)(WorkTablePlus);